<template>
  <el-card class="box-card">
    <el-form ref="form" v-loading="loading" :model="form" label-width="130px">
      <el-form-item label="账户设置">
        <el-switch v-model="form.enableLocalLogin" active-text="使用本地帐户进行身份验证" /><br>
        <el-switch v-model="form.isSelfRegistrationEnabled" active-text="是否启用自我注册" />
      </el-form-item>
      <el-divider />
      <el-form-item label="双重因素登录设置">
        待添加
      </el-form-item>
      <el-divider />
      <el-form-item>
        <el-button type="primary" :loading="isSubmitLoading" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getSettings, updateSettings } from "@/api/settings/account";

export default {
  name: 'AccountSettings',
  data() {
    return {
      loading: true,
      isSubmitLoading: false,
      form: {
        enableLocalLogin: true,
        isSelfRegistrationEnabled: true
      }
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      getSettings().then(result => {
        this.form = result;

        this.loading = false;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      });
    },
    save() {
      console.log(this.form);

      this.isSubmitLoading = true;
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        updateSettings(this.form)
          .then(() => {
            this.$message({ message: "保存成功", type: "success" });
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          })
          .finally(() => {
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          });
      });
    }
  }
};
</script>
<style scoped>
.el-checkbox {
  display: block;
}
</style>
